<template>
    <div
        v-loading.fullscreen="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-text="地图数据加载中..."
        class="amap-wrapper"
        :style="'height:' + height + 'px'"
    >
        <el-amap
            class="amap-box"
            :animateEnable="false"
            :plugin="plugin"
            :center="center"
            :zoom="zoom"
            :vid="'amap-vue'"
            :events="mapevents"
        >
            <district-explorer
                @featureChange="change"
                @districtExplorerLoad="districtExplorerLoad"
                @clearData="clearData"
                :center="center"
                :zoom="zoom"
                ref="districtExplorer"
            ></district-explorer>
            <catholic-marker
                v-for="(org, index) in organization_current"
                :options="{
                    content: getInfoConten(childmarkerOrganization, org),
                    position: org.position,
                    events: org.events
                }"
                :key="index + org.title"
                :extData="org"
                @oneMarkerClick="oneMarkerClick"
            ></catholic-marker>
            <custom-marker-cluster
                v-for="(diocese, index) in parish_current"
                :key="index + diocese.title"
                :markerList="diocese.parishlist"
                :renderCluserMarker="contentRender"
                :markerContent="markerContent"
                :extData="diocese"
                @oneMarkerClick="oneMarkerClick"
            ></custom-marker-cluster>
            <advanced-info-window
                ref="AdvancedInfoWindow"
                :content="info_window_content"
            ></advanced-info-window>
        </el-amap>
    </div>
</template>
<script>
import { DistrictExplorer } from "./district-explorer.js";
import { customMarkerCluster } from "../../../amapplugin/custom-marker-cluster.js";
import childmarker from "../../../amapplugin/components/children/marker";
import childmarkerOrganization from "../../../amapplugin/components/children/marker-organization.vue";
import childMarkerClustre from "../../../amapplugin/components/children/marker-cluster";
import { getDioceseListHasParish } from "../../../api/home/diocese";
import { getOrganizationAll } from "../../../api/home/organization";
import { AdvancedInfoWindow } from "./advanced-info-window";
import InfoWindow from "../../../amapplugin/components/children/info-window";
import { CatholicMarker } from "./catholic-marker.js";
import Vue from "vue";
export default {
    name: "Map",
    data: () => {
        return {
            loading: true,
            reset: false,
            height: 500,
            zoom: 3,
            center: [105.93879, 37.535061],
            plugin: [
                {
                    pName: "ToolBar",
                    position: "RT"
                }
            ],
            parish_list: {},
            parish_current: [],
            organization_list: {},
            organization_current: [],
            info_window_content: "",
            markerContent: (h, extData) => {
                return h(childmarker, {
                    props: { extData }
                });
            },
            contentRender: (h, extData, context) => {
                return h(childMarkerClustre, {
                    props: { context, extData }
                });
            },
            childmarkerOrganization
        };
    },
    created() {
        this.height = document.documentElement.clientHeight - 20;
        let width = document.body.clientWidth;
        switch (true) {
            case width >= 1200:
                this.zoom = 4.4;
                break;
            case width >= 992:
                this.zoom = 4.3;
                break;
            case width >= 768:
                this.zoom = 4.3;
                break;
            case width >= 576:
                this.zoom = 3.3;
                break;
            default:
                this.zoom = 3;
        }
    },
    computed: {
        mapevents() {
            return {
                contextmenu: e => {
                    this.clearData();
                    this.$refs.districtExplorer.reload_district();
                }
            };
        }
    },
    components: {
        DistrictExplorer,
        customMarkerCluster,
        AdvancedInfoWindow,
        CatholicMarker
    },
    methods: {
        //清除地图数据
        clearData() {
            this.parish_current = [];
            this.organization_current = [];
        },
        districtExplorerLoad() {
            let adcode = this.$route.params.adcode;
            if (adcode) {
                this.$refs.districtExplorer.load_area_node(adcode);
                this.change(adcode);
            } else {
                let adcode = this.$route.params.adcode;
                if (adcode == undefined) {
                    this.loading = false;
                }
            }
        },
        async change(adcode) {
            this.parish_current = [];
            if (this.parish_list[adcode]) {
                this.parish_current = this.parish_list[adcode];
            } else {
                let dioceseData = await getDioceseListHasParish({
                    province_adcode: adcode
                });
                if (dioceseData.status == 200 && dioceseData.data) {
                    this.parish_list[adcode] = dioceseData.data;
                    this.parish_current = dioceseData.data;
                }
            }
            this.organization_current = [];
            if (this.organization_list[adcode]) {
                this.organization_current = this.organization_list[adcode];
            } else {
                let organizationData = await getOrganizationAll({
                    province_adcode: adcode
                });
                if (
                    organizationData.status == 200 &&
                    organizationData.data.data
                ) {
                    this.organization_list[adcode] = this.organization_current =
                        organizationData.data.data;
                }
            }
            this.loading = false;
        },
        oneMarkerClick(e) {
            this.info_window_content = this.getInfoConten(
                InfoWindow,
                e.target.getExtData()
            );
            this.$refs.AdvancedInfoWindow.show(e.target.getExtData().position);
        },
        getInfoConten(compose, extData) {
            let instance = new Vue({
                render: h => {
                    return h(compose, { props: { extData } });
                }
            });
            instance.$mount();
            return instance.$el;
        }
    }
};
</script>
<style>
.amap-wrapper {
    height: 100%;
}
</style>
